<template>
	<view class="filter_dis_wrapper for_filter_pop">
		<view class="filter_item" ref="filterTopPop">
			<view :class="item.select ? 'item select' : 'item'" v-for="(item, index) in provinceList" :key="index" @click="makeCityElement(item)">
				{{ item.text }}
				<view class="arrow" v-if="item.children.length"></view>
			</view>
		</view>
		
		<u-mask :show="showCityPop" @click="handleCityOverlay" :custom-style="{background:'rgba(0,0,0,.4)'}" :zoom="false"/>
		<u-popup v-model="showCityPop" mode="right" :mask="false" width="75%"  ref="filterCityPop">
			<view  class="second_wrapper">
				<view class="filter_item" v-if="cityList.length">
					<scroll-view scroll-y="true" style="height: 900rpx;">
						<view :class="item.select ? 'item select' : 'item'" v-for="(item, index) in cityList" :key="index"
							@click="makeCountyElement(item)">
							{{ item.text }}
							<view class="arrow" v-if="item.children.length"></view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup> 
		<!--  -->
		<u-mask :show="showCountyPop" @click="showCountyPop = false"  :zoom="false" :custom-style="{background:'rgba(0,0,0,.2)'}" :z-index="zIndex"  />
		<u-popup v-model="showCountyPop" mode="right" width="50%" :mask="false">
			<view class="second_wrapper">
				<view class="filter_item" v-if="countyList.length">
					<scroll-view scroll-y="true" style="height: 900rpx;">
						<view :class="item.select ? 'item select' : 'item'" v-for="(item, index) in countyList" :key="index"
							@click="handleSearch(item)">
							{{ item.text }}
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'DistrictFilter',
		props: ['districts', 'type', 'all'],
		data() {
			return {
				citySource: [],
				provinceList: [],
				cityList: [],
				countyList: [],
				district1: '',
				district2: '',
				district3: '',
				districtName: '',
				showCityPop: false,
				showCountyPop: false,
				count_pop_lay: 'count_pop_lay',
				zIndex: 1,
				showAll: true
			}
		},
		mounted() {
			this.$store.dispatch('getClassify', 'citycategory').then(() => {
				// 处理地区格式
				this.citySource = this.$store.state.classifyCityOriginal
				let storeDistrict = (JSON.parse(JSON.stringify(this.citySource)))
				if (this.type) {
					storeDistrict.unshift({
						value: '',
						label: '不限',
						children: []
					})
				}
				this.citySource = storeDistrict.map(function(item) {
					return {
						id: item.value,
						text: item.label,
						children: item.children
					}
				})
				this.initData()
			})
		},
		methods: {
			// 初始化数据
			initData() {
				if (this.all === false) {
					this.showAll = false
				}
				if (this.districts[0]) {
					// 需要恢复选中
					this.district1 = this.districts[0]
					this.district2 = this.districts[1]
					this.district3 = this.districts[2]
					this.makeElement(this.district1, this.citySource, 2)
					if (this.cityList.length) {
						this.showCityPop = true
					}
					if (parseInt(this.district2) !== 0) {
						this.makeElement(this.district2, this.cityList, 3)
						if (this.countyList.length) {
							let elIndex = this.$refs.filterCityPop.style.zIndex
							this.zIndex = parseInt(elIndex) - 1
							this.showCountyPop = true
						}
					}
				}
				this.provinceList = this.citySource.map(function(item) {
					return {
						id: item.id,
						text: item.text,
						children: item.children,
						select: false
					}
				})
				this.syncSelect()
			},
			// 点击遮罩层
			handleCityOverlay() {
				this.showCountyPop = false
				this.showCityPop = false
			},
			// 同步选中状态
			syncSelect() {
				let _this = this
				this.provinceList = this.provinceList.map(function(item) {
					return {
						id: item.id,
						text: item.text,
						children: item.children,
						select: parseInt(item.id) === parseInt(_this.district1)
					}
				})
				this.cityList = this.cityList.map(function(item) {
					return {
						id: item.id,
						text: item.text,
						children: item.children,
						select: parseInt(item.id) === parseInt(_this.district2)
					}
				})
				this.countyList = this.countyList.map(function(item) {
					return {
						id: item.id,
						text: item.text,
						select: parseInt(item.id) === parseInt(_this.district3)
					}
				})
			},
			/**
			 * 生成下级列表
			 * @param id 上级id
			 * @param data 数据
			 * @param level 级别
			 */
			makeElement(id, data, level) {
				let disList = data.filter(item => parseInt(item.id) === parseInt(id))
				let currentDis = disList[0].children
				if (currentDis.length) {
					if (parseInt(level) === 2) {
						// 生成市级
						this.cityList = currentDis.map(function(item) {
							return {
								id: item.value,
								text: item.label,
								children: item.children,
								select: false
							}
						})
						if (this.showAll) {
							this.cityList.unshift({
								id: 0,
								text: `全${disList[0].text}`,
								children: [],
								select: false
							})
						}
					} else {
						// 生成区级
						this.countyList = currentDis.map(function(item) {
							return {
								id: item.value,
								text: item.label,
								select: false
							}
						})
						if (this.showAll) {
							this.countyList.unshift({
								id: 0,
								text: `全${disList[0].text}`,
								select: false
							})
						}
					}
				}
			},
			/**
			 * 生成市级列表
			 * @param item 选中项
			 */
			makeCityElement(item) {
				let id = item.id
				if (id) {
					this.district1 = id
					if (!this.district2) {
						this.district2 = 0
					}
					if (!this.district3) {
						this.district3 = ''
					}
					this.cityList = []
					this.countyList = []
					this.makeElement(id, this.citySource, 2)
					if (!this.cityList.length) {
						// 没有市级，跳转
						this.district2 = 0
						this.district3 = 0
						this.districtName = item.text
						this.toSearch()
					} else {
						this.showCityPop = !this.showCityPop
					}
				} else {
					// 不限
					this.district1 = ''
					this.district2 = ''
					this.district3 = ''
					this.districtName = '地区'
					this.toSearch()
				}
				this.syncSelect()
			},
			/**
			 * 生成区级列表
			 * @param item 选中项
			 */
			makeCountyElement(item) {
				let id = item.id
				this.district2 = id
				this.countyList = []
				if (parseInt(id) === 0) {
					// 选择全部
					this.district3 = 0
					this.districtName = item.text
					this.toSearch()
				} else {
					this.makeElement(id, this.cityList, 3)
					if (!this.countyList.length) {
						this.district3 = 0
						this.districtName = item.text
						this.toSearch()
					} else {
						let elIndex = this.$refs.filterCityPop.style.zIndex
						this.zIndex = parseInt(elIndex)-1
						this.showCountyPop = !this.showCountyPop
					}
				}
				this.syncSelect()
			},
			/**
			 * 区级地区选择
			 * @param item 选中项
			 */
			handleSearch(item) {
				this.district3 = item.id
				this.districtName = item.text
				this.toSearch()
				this.syncSelect()
			},
			toSearch() {
				this.handleCityOverlay()
				if (this.type) {
					// 筛选
					this.$emit('doSearch', {
						district1: this.district1,
						district2: this.district2,
						district3: this.district3,
						districtName: this.districtName
					})
				} else {
					// 选择
					this.$emit('doSelect', [
						this.district1,
						this.district2,
						this.district3,
						this.districtName
					])
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
  .filter_dis_wrapper {
    display: flex; position: relative; overflow-x: hidden;
	background-color:#fff;
    .second_wrapper {
      .item {}
      max-height: 100%; overflow-y: auto; background-color: #ffffff;
      display: flex;
    }
    .filter_item {
      flex: 1; display: block; height: 100%; overflow-x: hidden;
      overflow-y: auto;
      .item {
        .arrow {
          position: absolute; right: 30rpx; top: 42rpx; width: 14rpx;
          height: 14rpx; border-top: 2rpx solid #999999;
          border-right: 2rpx solid #999999; transform: rotate(45deg);
        }
        &::before {
          position: absolute; box-sizing: border-box; content: ' ';
          pointer-events: none; right: 0; bottom: 0; left: 40rpx;
          border-bottom: 2rpx solid #ebedf0;
          -webkit-transform: scaleY(.5); transform: scaleY(.5);
        }
        position: relative; 
		padding: 0 44rpx; 
		height: 100rpx;
		line-height: 100rpx;
        font-size: 28rpx; 
		color: #323233;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
        &.select { color: #266DFF }
      }
    }
    text {
      &.select { color: #266DFF }
      margin: 10rpx;
    }
    font-size: 32rpx;
  }
</style>
